<template>
  <div>
    <div v-if="!showDetails">
      <el-row class="el-header-content">
        <el-col :span="6"
                class="per-item">
          <!-- <span class="per-item-txt">搜索：</span> -->
          <div class="demo-input-suffix">
            <el-input size="mini"
                      clearable
                      v-model="searchContent"
                      placeholder="请输入编号/来电号码"></el-input>
          </div>
        </el-col>
        <el-col :span="6"
                class="per-item">
          <!-- <span class="per-item-txt">状态：</span> -->
          <el-select v-model="workOrderTypeName"
                     clearable
                     size="mini"
                     placeholder="请选择状态">
            <el-option v-for="item in orderStatus"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value + ''">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8"
                class="per-item">
          <el-date-picker v-model="dateVal"
                          size="mini"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          @change="changeDate"
                          type="datetimerange"
                          range-separator="-"
                          :default-time="['00:00:00', '23:59:59']"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col style="float: right"
                :span="2">
          <button style="float: right"
                  type="button"
                  size="mini"
                  @click="getWorkOrderListInfo"
                  class="el-button el-button--primary el-button--medium h30Btn btn-search">
            查询
          </button>
        </el-col>
      </el-row>
      <el-row class="detail-info"
              v-for="item in datainfo"
              :key="item.id">
        <el-row class="per-detail-info"
                :gutter="20">
          <el-col :span="8">
            <div @click="detailForm(item.id)"
                 class="order_num">
              {{ item.id }}
            </div>
          </el-col>
          <el-col :span="12">
            <!-- <p class='order_word'>标题:{{item.title || '无'}}</p> -->
          </el-col>
          <el-col :span="4">
            <!-- 超时按钮 -->
            <!-- <button type="button"
                        class="el-button el-button--primary h30Btn over-time-button">超时</button> -->
            <!-- <el-button type="button"
                       @click="orderUrge(item.id)"
                       class="el-button el-button--primary h30Btn">催单</el-button> -->
          </el-col>
        </el-row>
        <el-row class="per-detail-info"
                :gutter="20">
          <el-col :span="12"
                  style="color: #8f8f91"
                  class="order_word">创建时间：{{ item.createTimeStr }}</el-col>
          <el-col :span="12">
            <!-- <img src="@/assets/images/icon2.png" /> -->
            <el-tooltip class="item"
                        effect="light"
                        :content="item.currentHandlerName"
                        placement="top">
              <p class="order_word">
                当前处理人：{{ item.currentHandlerName }}
              </p>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row class="per-detail-info">
          <el-col :span="8"><img src="@/assets/images/icon1.png" />
            <p class="order_word">优先级：{{ item.priority || "无" }}</p>
          </el-col>
          <el-col :span="8">
            <!-- <img src="@/assets/images/icon2.png" />
            <el-tooltip class="item"
                        effect="light"
                        :content="item.currentHandlerName"
                        placement="top">
              <p class='order_word'>客服组/{{item.currentHandlerName}}</p>
            </el-tooltip> -->
            <el-tooltip class="item"
                        effect="light"
                        :content="item.business_type || '无'"
                        placement="top">
              <p class="order_word">
                业务类型：{{ item.business_type || "无" }}
              </p>
            </el-tooltip>
          </el-col>
          <el-col :span="8"
                  class="order_word"><img src="@/assets/images/icon3.png" />{{
              item.statusName
            }}</el-col>
        </el-row>
      </el-row>
      <el-row v-if="totalPages === 0"
              class="serchMore nodata detail-info">
        <span>暂无数据</span>
      </el-row>
      <el-row class="serchMore"><span v-if="totalPages && totalPages > page"
              @click="searchMoreInfo">查看更多&nbsp;&nbsp;<img src="@/assets/images/more.png" /></span>
      </el-row>
    </div>
    <reminder styele="width:50%"
              v-show="reminderShow"
              @changeShow="orderUrgeHide"></reminder>
    <look-order v-if="showDetails"
                @sendShowDetails="showDetail"
                :workOrderId="workOrderId"
                :workbenchInfo="workbenchInfo"></look-order>
  </div>
</template>

<script>

import reminder from "@/views/orderDataList/orderDialog/reminder.vue";
import lookOrder from "./lookOrder.vue";
import {
  selectAllWorkOrderStatusName,
  getWorkOrderList,
  updateBusinessHandler
} from "@/api/workOrderController";
import {
  getRole
} from "@/api/customField.js";
export default {
  name: "",
  components: {
    reminder,
    lookOrder
  },
  props: {
    workbenchInfo: {
      type: Object,
      default: {}
    },
    customInfo: {
      type: Boolean
    },
    customerId: {
      type: String
    }
  },
  data () {
    return {
      itemType: window.CONFIG.itemType,
      workOrderId: '',
      showDetails: false,
      reminderShow: false,
      workOrderTypeName: "",
      orderStatus: [],
      searchContent: "",
      dateVal: [],
      page: 1,
      pageSize: 10,
      workOrderFilterId: 6,
      total: "",
      workOrderIdList: [],
      totalPages: 0,
      datainfo: [],
      customIdentify: ''
    };
  },
  beforeMount () { },
  created () {

  },
  mounted () {
    this.$EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.getWorkOrderListInfo()
    });
    function getQueryString (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var arr = window.location.hash.split('?')
      if (arr.length < 2) {
        return null;
      }
      var r = arr[1].match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }
    this.customIdentify = getQueryString('customIdentify')
    this.getSelectAllWorkOrderStatusName();
    if (this.$store.state.historyPerformShow == '1') {
      this.getDataInfo();
    } else {
      this.noHandlegetDataInfo()
    }
  },
  computed: {
    workbenchInfos () {
      this.showDetails = false
      return this.workbenchInfo ? this.workbenchInfo : {}
    },
    currentHandlerNames: function () {
      return function (item) {
        return item ? item.substring(0, 40) + "..." : "";
      };
    },
    userId () {
      return this.$store.getters.userId;
    },
    uid () {
      return this.workbenchInfos ? this.workbenchInfos.uid : '';
    }
  },
  watch: {
    showDetails (n, o) {
      this.showDetails = n
    },
    userId (n, o) {
      this.$store.state.userId = n
    },
    workbenchInfo (n, o) {
      this.workbenchInfo = n
      this.datainfo = []
      if (this.workbenchInfo.uid) {
        this.getWorkOrderListInfo()
      }
      if (!this.workbenchInfo.uid) {
        this.showDetails = false
      }
    },
    // 'workbenchInfo.uid': {
    //   handler (n, o) {
    //     this.workbenchInfo.uid = n
    //     this.getWorkOrderListInfo()
    //   },
    //   deep: true,
    //   immediate: true
    // },
    customerId (n, o) {
      this.customerId = n
      // if (this.customerId) {
      this.getWorkOrderListInfo()
      // }
    }
  },
  methods: {
    getQueryString (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var arr = window.location.hash.split('?')
      if (arr.length < 2) {
        return null;
      }
      var r = arr[1].match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 时间选择
    changeDate () { },
    detailForm (id) {
      this.workOrderId = id
      this.$emit("sendShowTabs", false)
      this.$store.commit("orderDetailsIdFun", id);
      this.workOrderIdList = [];
      this.workOrderIdList.push(id);
      sessionStorage.setItem(
        "workOrderIdList",
        JSON.stringify(this.workOrderIdList)
      );
      this.showDetails = true
    },
    showDetail (e) {
      this.showDetails = e
      this.$emit("sendShowTabs", true)
    },
    // 获取类型的所有的数据
    getSelectAllWorkOrderStatusName () {
      selectAllWorkOrderStatusName().then(res => {
        if (res.data.retCode === 200) {
          this.orderStatus = res.data.data;
        }
      });
    },
    // 搜索
    getWorkOrderListInfo () {
      this.page = 1
      // let customIdentifyInfo = this.workbenchInfos.uid ? this.workbenchInfos.uid : ''
      if (!sessionStorage.getItem("workbenchInfoFun")) {
        // this.datainfo = [];
        this.totalPages = 0
        return
      }
      this.noHandlegetDataInfo();

      // if (sessionStorage.getItem("customInfo") && JSON.parse(sessionStorage.getItem("customInfo")).customerId) {
      //   customIdentifyInfo = JSON.parse(sessionStorage.getItem("customInfo")).customerId
      // } else if (sessionStorage.getItem("workbenchInfos") && sessionStorage.getItem("workbenchInfos") !== "null") {
      //   if (JSON.parse(sessionStorage.getItem("workbenchInfos")).uid) {
      //     customIdentifyInfo = JSON.parse(sessionStorage.getItem("workbenchInfos")).uid
      //   }
      // } else {
      //   customIdentifyInfo = ''
      // }
      // if (customIdentifyInfo) {
      //   this.noHandlegetDataInfo();
      // } else if (this.customIdentify) {
      //   this.noHandlegetDataInfo();
      // }
    },
    // 不做页面跳转的历史数据查询
    noHandlegetDataInfo () {
      if (this.userId == "") {
        return;
      }
      let customIdentifyInfo = ''
      if (sessionStorage.getItem("customInfo") && JSON.parse(sessionStorage.getItem("customInfo")).customerId) {
        customIdentifyInfo = JSON.parse(sessionStorage.getItem("customInfo")).customerId
      } else {
        customIdentifyInfo = this.workbenchInfos.uid ? this.workbenchInfos.uid : ''
      }
      if (this.getQueryString('customIdentify')) {
        customIdentifyInfo = this.getQueryString('customIdentify')
      }
      if (!customIdentifyInfo) {
        return
      }
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        createTime: this.dateVal,
        statusId: this.workOrderTypeName,
        searchContent: '',
        workOrderId: this.searchContent,
        customIdentify: customIdentifyInfo,
        customField: {}
      };
      if (this.searchContent) {
        params.customField.phone_number = this.searchContent
      }
      getWorkOrderList(params).then(res => {
        let data = res.data;
        this.datainfo = []
        if (data.retCode === 200) {
          this.totalPages = Math.ceil(data.count / this.pageSize);
          this.datainfo = data.data
          for (var i in this.datainfo) {
            Object.assign(this.datainfo[i], this.datainfo[i].customField);
          }
          this.total = data.count;
        } else {
          this.datainfo = []
        }
      });
    },
    // 请求列表数据
    getDataInfo () {
      if (this.userId == "") {
        return;
      }
      let customIdentifyInfo = this.workbenchInfos.uid ? this.workbenchInfos.uid : ''
      if (this.getQueryString('customIdentify')) {
        customIdentifyInfo = this.getQueryString('customIdentify')
      }
      if (!customIdentifyInfo) {
        return
      }
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        createTime: this.dateVal,
        searchContent: '',
        workOrderId: this.searchContent,
        statusId: this.workOrderTypeName,
        customIdentify: customIdentifyInfo,
        customField: {}
      };
      if (this.searchContent) {
        params.customField.phone_number = this.searchContent
      }
      let _this = this
      getWorkOrderList(params).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          _this.totalPages = Math.ceil(data.count / _this.pageSize);
          _this.datainfo = data.data;
          for (var i in _this.datainfo) {
            Object.assign(_this.datainfo[i], _this.datainfo[i].customField);
          }
          _this.total = data.count;
          if (_this.total == 0) {
            _this.$store.commit("typeDataFun", 2);
          } else {
            _this.$store.commit("typeDataFun", 1);
          }
        }
      });
    },
    // 催单
    orderUrge (num) {
      this.reminderShow = true
      this.workOrderIdList = [];
      this.workOrderIdList.push(num);
      sessionStorage.setItem(
        "workOrderIdList",
        JSON.stringify(this.workOrderIdList)
      );
    },
    // 关闭催单
    orderUrgeHide (e) {
      this.reminderShow = e.value;
    },
    // 查看更多
    searchMoreInfo () {
      // let customIdentifyInfo = ''
      // if (this.customIdentify && this.customIdentify != '') {
      //   customIdentifyInfo = this.customIdentify
      // } else if (this.customInfo && this.customInfo.customerId) {
      //   customIdentifyInfo = this.customInfo.customerId
      // } else if (this.workbenchInfos && this.workbenchInfos !== null) {
      //   if (this.workbenchInfos.uid) {
      //     customIdentifyInfo = this.workbenchInfos.uid
      //   }
      // } else {
      //   customIdentifyInfo = ''
      // }
      let customIdentifyInfo = ''
      if (sessionStorage.getItem("customInfo") && JSON.parse(sessionStorage.getItem("customInfo")).customerId) {
        customIdentifyInfo = JSON.parse(sessionStorage.getItem("customInfo")).customerId
      } else {
        customIdentifyInfo = this.workbenchInfos.uid ? this.workbenchInfos.uid : ''
      }
      if (this.getQueryString('customIdentify')) {
        customIdentifyInfo = this.getQueryString('customIdentify')
      }
      if (!customIdentifyInfo) {
        return
      }
      this.page = this.page + 1;
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        createTime: this.dateVal,
        statusId: this.workOrderTypeName,
        searchContent: '',
        workOrderId: this.searchContent,
        customIdentify: customIdentifyInfo,
        customField: {
          // phone_number: this.searchContent,
        }
      };
      getWorkOrderList(params).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.datainfo.push(...data.data);
          for (var i in this.datainfo) {
            Object.assign(this.datainfo[i], this.datainfo[i].customField);
          }
          this.total = data.count;
          let Length = data.data.length
          this.workOrderIdList = data.data[Length - 1].id;
          this.loading = false;
        }

      });
    }
  },
};
</script>
<style scoped>
.el-header-content {
  width: 100%;
  /* padding-top: 20px; */
}

>>> .el-upload-list li {
  pointer-events: auto !important;
}

.detail-info {
  padding: 10px 20px;
  margin: 10px 0;
  background-color: #f8f9fc;
  white-space: nowrap;
}

.per-detail-info {
  line-height: 40px;
  display: flex;
  align-items: center;
}
.order_word {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .per-detail-info-aside {
  display: flex;
} */

.per-detail-info .el-col {
  display: flex;
  align-items: center;
}

.per-detail-info .el-col img {
  margin-right: 5px;
  width: 12px;
  height: 12px;
  margin: 0 10px;
}

.over-time-button {
  background-color: #ef9f54;
}

.el-date-editor >>> .el-range-separator {
  padding: 0;
}

.per-item {
  display: flex;
  flex: 1;
  align-items: center;
  margin-right: 10px;
}

.per-item-txt {
  white-space: nowrap;
}

.serchMore {
  margin: 20px 0;
  text-align: center;
  cursor: pointer;
}

.nodata {
  padding: 30px 0;
  font-size: 13px;
}

.btn-search {
  min-width: 50px;
}
.h30Btn {
  float: right;
}
.order_num {
  text-decoration: underline;
  cursor: pointer;
  color: #4786c3;
}
>>> .el-picker-panel {
  width: 500px !important;
}
</style>
